<template>
  <div class="story-board">
    <div class="story-form">
      <div class="form-group">
        <label>昵称</label>
        <input 
          type="text" 
          v-model="form.author" 
          placeholder="请输入您的昵称"
          maxlength="20"
          :disabled="submitting"
        >
        <span class="word-limit">{{ form.author.length }}/20</span>
      </div>
      <div class="form-group">
        <label>故事内容</label>
        <textarea 
          v-model="form.content" 
          placeholder="请分享您的家传轶事..."
          maxlength="500"
          :disabled="submitting"
        ></textarea>
        <span class="word-limit">{{ form.content.length }}/500</span>
      </div>
      <div class="form-actions">
        <button 
          class="submit-btn" 
          @click="submitForm" 
          :disabled="submitting"
        >
          {{ submitting ? '发布中...' : '发布故事' }}
        </button>
        <button 
          class="reset-btn" 
          @click="resetForm" 
          :disabled="submitting"
        >
          重置
        </button>
      </div>
    </div>

    <div class="story-list">
      <div v-if="stories.length === 0" class="empty-tip">
        <i class="el-icon-chat-line-square"></i>
        暂无故事，快来分享你的家传轶事吧！
      </div>
      <transition-group name="story-fade" tag="div">
        <div v-for="story in stories" :key="story.id" class="story-item">
          <div class="story-header">
            <div class="story-info">
              <span class="author">
                <i class="el-icon-user"></i>
                {{ story.author }}
              </span>
              <span class="date">
                <i class="el-icon-time"></i>
                {{ story.date }}
              </span>
            </div>
            <button 
              class="delete-btn"
              @click="confirmDelete(story.id)"
            >
              <i class="el-icon-delete"></i>
            </button>
          </div>
          <div class="story-content">{{ story.content }}</div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoryBoard',
  data() {
    return {
      submitting: false,
      form: {
        author: '',
        content: ''
      },
      stories: JSON.parse(localStorage.getItem('stories') || '[]')
    }
  },
  methods: {
    validateForm() {
      if (!this.form.author.trim()) {
        this.showMessage('请输入昵称', 'warning')
        return false
      }
      if (this.form.author.length < 2 || this.form.author.length > 20) {
        this.showMessage('昵称长度在2-20个字符之间', 'warning')
        return false
      }
      if (!/^[\u4e00-\u9fa5a-zA-Z0-9_]+$/.test(this.form.author)) {
        this.showMessage('昵称只能包含中文、英文、数字和下划线', 'warning')
        return false
      }
      if (!this.form.content.trim()) {
        this.showMessage('请输入故事内容', 'warning')
        return false
      }
      if (this.form.content.length < 10 || this.form.content.length > 500) {
        this.showMessage('故事内容长度在10-500个字符之间', 'warning')
        return false
      }
      return true
    },
    submitForm() {
      if (this.submitting) return
      if (!this.validateForm()) return

      this.submitting = true
      
      try {
        const story = {
          id: Date.now(),
          author: this.form.author.trim(),
          content: this.form.content.trim(),
          date: new Date().toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          })
        }
        
        this.stories.unshift(story)
        this.saveStories()
        this.showMessage('发布成功！', 'success')
        this.resetForm()
      } catch (error) {
        this.showMessage('发布失败，请稍后重试', 'error')
      } finally {
        this.submitting = false
      }
    },
    resetForm() {
      this.form = {
        author: '',
        content: ''
      }
    },
    confirmDelete(id) {
      const el = document.createElement('div')
      el.className = 'delete-confirm-dialog'
      el.innerHTML = `
        <div class="dialog-content">
          <i class="el-icon-warning"></i>
          <h3>确定要删除这条故事吗？</h3>
          <p>删除后将无法恢复</p>
          <div class="dialog-actions">
            <button class="cancel-btn">取消</button>
            <button class="confirm-btn">确定删除</button>
          </div>
        </div>
      `
      document.body.appendChild(el)
      
      const cancelBtn = el.querySelector('.cancel-btn')
      const confirmBtn = el.querySelector('.confirm-btn')
      
      cancelBtn.onclick = () => {
        el.classList.add('fade-out')
        setTimeout(() => {
          document.body.removeChild(el)
        }, 300)
      }
      
      confirmBtn.onclick = () => {
        this.deleteStory(id)
        el.classList.add('fade-out')
        setTimeout(() => {
          document.body.removeChild(el)
        }, 300)
      }
      
      setTimeout(() => {
        el.classList.add('show')
      }, 10)
    },
    deleteStory(id) {
      this.stories = this.stories.filter(story => story.id !== id)
      this.saveStories()
      this.showMessage('删除成功', 'success')
    },
    saveStories() {
      localStorage.setItem('stories', JSON.stringify(this.stories))
    },
    showMessage(message, type = 'info') {
      const el = document.createElement('div')
      el.className = `message message-${type}`
      el.textContent = message
      document.body.appendChild(el)
      
      setTimeout(() => {
        el.classList.add('show')
      }, 10)
      
      setTimeout(() => {
        el.classList.remove('show')
        setTimeout(() => {
          document.body.removeChild(el)
        }, 300)
      }, 2000)
    }
  }
}
</script>

<style scoped>
.story-board {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
}

.story-form {
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 25px;
  position: relative;
}

.form-group label {
  display: block;
  color: #4A2F1D;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #E8D5C4;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-group textarea {
  height: 150px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4A2F1D;
  box-shadow: 0 0 0 2px rgba(74, 47, 29, 0.1);
}

.word-limit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #999;
  font-size: 12px;
}

.form-actions {
  display: flex;
  gap: 15px;
}

.submit-btn,
.reset-btn {
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn {
  background-color: #4A2F1D;
  color: white;
  border: none;
}

.submit-btn:hover {
  background-color: #6B4423;
}

.reset-btn {
  background-color: transparent;
  color: #4A2F1D;
  border: 1px solid #E8D5C4;
}

.reset-btn:hover {
  color: #6B4423;
  border-color: #6B4423;
}

.submit-btn:disabled,
.reset-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.story-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  padding-right: 10px;
}

.story-item {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(232, 213, 196, 0.5);
}

.story-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.9);
}

.story-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(74, 47, 29, 0.1);
}

.story-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.author {
  font-size: 16px;
  font-weight: bold;
  color: #4A2F1D;
  display: flex;
  align-items: center;
  gap: 5px;
}

.date {
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.story-content {
  color: #333;
  line-height: 1.8;
  text-align: justify;
  white-space: pre-wrap;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.delete-btn {
  background: none;
  border: none;
  color: #999;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.delete-btn i {
  font-size: 16px;
}

.delete-btn:hover {
  color: #ff4d4f;
  transform: scale(1.1);
  background: rgba(255, 77, 79, 0.1);
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.empty-tip i {
  font-size: 40px;
  color: #ccc;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(74, 47, 29, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 47, 29, 0.4);
}

.story-fade-enter-active, .story-fade-leave-active {
  transition: all 0.5s ease;
}

.story-fade-enter, .story-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 消息提示样式 */
.message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 24px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.message.show {
  opacity: 1;
  transform: translateX(0);
}

.message-success {
  background-color: #67C23A;
}

.message-warning {
  background-color: #E6A23C;
}

.message-error {
  background-color: #F56C6C;
}

.message-info {
  background-color: #909399;
}

/* 删除确认对话框样式 */
.delete-confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.delete-confirm-dialog.show {
  opacity: 1;
}

.delete-confirm-dialog.fade-out {
  opacity: 0;
}

.dialog-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.delete-confirm-dialog.show .dialog-content {
  transform: translateY(0);
}

.dialog-content i {
  font-size: 48px;
  color: #ff4d4f;
  margin-bottom: 20px;
}

.dialog-content h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px;
}

.dialog-content p {
  color: #666;
  margin-bottom: 20px;
}

.dialog-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.dialog-actions button {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  color: #666;
}

.cancel-btn:hover {
  background: #e8e8e8;
}

.confirm-btn {
  background: #ff4d4f;
  border: none;
  color: white;
}

.confirm-btn:hover {
  background: #ff7875;
}
</style> 